/*
 * @Description: Have A Nice Day!
 * @Author: Jacky
 * @Date: 2020-02-12 15:00:54
 * @LastEditors  : Jacky
 * @LastEditTime : 2020-02-13 13:49:42
 */
import React, {useEffect, useRef, useState} from 'react'
import LineChart from '../lineChart'
import styles from './index.module.css'
import { connect } from 'react-redux'
function Slide(props) {
    let swiperNode = useRef();
    let [activeIndex, setActiveIndex] = useState(0);
    let paginationList = ['全国疫情<br/>新增趋势','累计确诊<br/>现有疑似','全国累计<br/>治愈/死亡','治愈率<br/>病死率'];
    let [swiper, setSwiper] = useState(null);
    let changeSlide = (index)=>{
        swiper && swiper.slideTo(index);
    }
    let {chinaDayList, chinaDayAddList, dailyNewAddHistory, dailyDeadRateHistory} = props;

    useEffect(()=>{
        let swiperInstance = new window.Swiper(swiperNode.current)
        setSwiper(swiperInstance);
        // 监听swiper滑动结束的事件
        swiperInstance.on('slideChange',()=>{
            setActiveIndex(swiperInstance.activeIndex)
        })
        return ()=>{
            swiperInstance.off('slideChange')
        }
    }, [])

    return (
        <>
            <div className="swiper-container" ref={swiperNode}>
                <div className="swiper-wrapper">
                    <div className="swiper-slide">
                    <LineChart list={chinaDayAddList} type={["confirm","suspect"]} ></LineChart>
                    </div>
                    <div className="swiper-slide">
                    <LineChart list={chinaDayList} type={["confirm","suspect"]}></LineChart>
                    </div>
                    <div className="swiper-slide">
                    <LineChart list={chinaDayList} type={["dead","heal"]}></LineChart>
                    </div>
                    <div className="swiper-slide">
                    <LineChart list={chinaDayAddList} type={["deadRate","healRate"]}></LineChart>
                    </div>
                </div>
            </div>
            <div className={styles["nav-cubic"]}>
                {
                    paginationList.map((item, index)=>{
                    return <div key={'slide'+index} onClick={()=>changeSlide(index)} className={styles[activeIndex === index ? "nav-cubic-active":""] + " " + styles["nav-pagination"]} dangerouslySetInnerHTML={{__html:item}}></div>
                    })
                }
            </div>
        </>
    )
}

export default connect((state)=>{
    return {
        chinaDayList: state.totalData.chinaDayList,
        chinaDayAddList: state.totalData.chinaDayAddList,
        dailyNewAddHistory: state.totalData.dailyNewAddHistory,
        dailyDeadRateHistory: state.totalData.dailyDeadRateHistory
    }
})(Slide)

